<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作节点</title>
</head>
<style>
    .child{
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: red;
    }
</style>
<script>
    window.onload=function(){
        // 添加孩子节点
        // 1.获取父节点
        // 2.查找子节点 创造子节点
        // 3.给父节点添加孩子节点
        var parent=document.getElementsByClassName('parent')[0];
        // 创造子节点
        var newChild=document.createElement('div');
        // innerHTML 添加元素的内部内容 识别代码片段
        // newChild.innerHTML='four';
        newChild.innerHTML='<div class="child">four</div>';
        // 添加孩子节点给父节点
        parent.appendChild(newChild);
        console.log(parent);//输出日志
        console.info(parent);//输出信息
        console.debug(parent);//
        console.error(parent);
        console.warn(parent);
    }
</script>
<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>
</html>